<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        
        <div class="layui-form-item">
            <label class="layui-form-label">方案名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input"  placeholder="请输入name" value="{$row.name|default=''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">方案类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="1" lay-skin="primary" lay-filter="type" title="商机" lay-verify="required" {if $row.type eq 1} checked {/if}>
                <input type="radio" name="type" value="2" lay-skin="primary" lay-filter="type" title="订单" lay-verify="required" {if $row.type eq 2} checked {/if}>
                <input type="radio" name="type" value="3" lay-skin="primary" lay-filter="type" title="设计师" lay-verify="required" {if $row.type eq 3} checked {/if}>
                <input type="radio" name="type" value="4" lay-skin="primary" lay-filter="type" title="异业" lay-verify="required" {if $row.type eq 4} checked {/if}>
            </div>
        </div>


        <div class="layui-form-item test_form_show1 layui-hide">
            <label class="layui-form-label required">列表展示</label>
            <div class="layui-input-block" id="container_fields1">

            </div>
        </div>
        <div class="layui-form-item test_form_show2 layui-hide">
            <label class="layui-form-label required">列表展示</label>
            <div class="layui-input-block" id="container_fields2">

            </div>
        </div>
        <div class="layui-form-item test_form_show3 layui-hide">
            <label class="layui-form-label required">列表展示</label>
            <div class="layui-input-block" id="container_fields3">

            </div>
        </div>
        <div class="layui-form-item test_form_show4 layui-hide">
            <label class="layui-form-label required">列表展示</label>
            <div class="layui-input-block" id="container_fields4">

            </div>
        </div>

        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>
<script src="__STATIC__/plugs/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','layer','element'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,element = layui.element
            ,jQuery = layui.jquery;

        IndeX = form.on("radio(type)", function (data) {

            var type_val = data.value;
            if(type_val == 1){
                // $('.test_form_show1').attr("style","display:block;");
                // $('.test_form_show2').attr("style","display:none;");
                // $('.test_form_show3').attr("style","display:none;");
                // $('.test_form_show4').attr("style","display:none;");
                $('.test_form_show1').removeClass('layui-hide')
                $('.test_form_show1').addClass('layui-show')


                $('.test_form_show2').removeClass("layui-show");
                $('.test_form_show3').removeClass("layui-show");
                $('.test_form_show4').removeClass("layui-show");

                $('.test_form_show2').addClass("layui-hide");
                $('.test_form_show3').addClass("layui-hide");
                $('.test_form_show4').addClass("layui-hide");

            }

            if(type_val == 2){
                // $('.test_form_show2').attr("style","display:block;");
                // $('.test_form_show1').attr("style","display:none;");
                // $('.test_form_show3').attr("style","display:none;");
                // $('.test_form_show4').attr("style","display:none;");

                $('.test_form_show2').addClass('layui-show')
                $('.test_form_show2').removeClass('layui-hide');

                $('.test_form_show1').removeClass("layui-show");
                $('.test_form_show3').removeClass("layui-show");
                $('.test_form_show4').removeClass("layui-show");

                $('.test_form_show1').addClass("layui-hide");
                $('.test_form_show3').addClass("layui-hide");
                $('.test_form_show4').addClass("layui-hide");
            }

            if(type_val == 3){
                //     $('.test_form_show3').attr("style","display:block;");
                //     $('.test_form_show1').attr("style","display:none;");
                //     $('.test_form_show2').attr("style","display:none;");
                //     $('.test_form_show4').attr("style","display:none;");


                $('.test_form_show3').removeClass('layui-hide');
                $('.test_form_show3').addClass('layui-show');

                $('.test_form_show1').removeClass("layui-show");
                $('.test_form_show2').removeClass("layui-show");
                $('.test_form_show4').removeClass("layui-show");

                $('.test_form_show1').addClass("layui-hide");
                $('.test_form_show2').addClass("layui-hide");
                $('.test_form_show4').addClass("layui-hide");
            }
            if(type_val == 4){
                // $('.test_form_show4').attr("style","display:block;");
                // $('.test_form_show1').attr("style","display:none;");
                // $('.test_form_show2').attr("style","display:none;");
                // $('.test_form_show3').attr("style","display:none;");

                $('.test_form_show4').addClass('layui-show')
                $('.test_form_show4').removeClass('layui-hide')

                $('.test_form_show1').removeClass("layui-show");
                $('.test_form_show2').removeClass("layui-show");
                $('.test_form_show3').removeClass("layui-show");

                $('.test_form_show1').addClass("layui-hide");
                $('.test_form_show2').addClass("layui-hide");
                $('.test_form_show3').addClass("layui-hide");
            }


        });
        // $(document).on('click','.layui-unselect',function(){<!-- -->
        //     var check = $(this).hasClass("layui-form-checked");
        //     if(check){<!-- -->
        //         $(this).parent('div').find('input').attr("checked","");
        //         $(this).removeClass('layui-form-checked')
        //     }else{<!-- -->
        //         $(this).parent('div').find('input').attr("checked","checked");
        //         $(this).addClass('layui-form-checked')
        //     }
        // })
        //监听复选框
        // form.on('checkbox', function(data){
        //     alert(43243)
        //     if(data.elem.checked==true){
        //         data.elem.checked = false;
        //     }else{
        //         data.elem.checked = true;
        //     }
        // });
        // form.render();

    });

    function showFields(type_val)
    {
        if(type_val == 1){
            // $('.test_form_show1').attr("style","display:block;");
            // $('.test_form_show2').attr("style","display:none;");
            // $('.test_form_show3').attr("style","display:none;");
            // $('.test_form_show4').attr("style","display:none;");
            $('.test_form_show1').removeClass('layui-hide')
            $('.test_form_show1').addClass('layui-show')


        }

        if(type_val == 2){
            // $('.test_form_show1').attr("style","display:block;");
            // $('.test_form_show2').attr("style","display:none;");
            // $('.test_form_show3').attr("style","display:none;");
            // $('.test_form_show4').attr("style","display:none;");
            $('.test_form_show2').removeClass('layui-hide')
            $('.test_form_show2').addClass('layui-show')


        }
        if(type_val == 3){
            // $('.test_form_show1').attr("style","display:block;");
            // $('.test_form_show2').attr("style","display:none;");
            // $('.test_form_show3').attr("style","display:none;");
            // $('.test_form_show4').attr("style","display:none;");
            $('.test_form_show3').removeClass('layui-hide')
            $('.test_form_show3').addClass('layui-show')


        }
        if(type_val == 4){
            // $('.test_form_show1').attr("style","display:block;");
            // $('.test_form_show2').attr("style","display:none;");
            // $('.test_form_show3').attr("style","display:none;");
            // $('.test_form_show4').attr("style","display:none;");
            $('.test_form_show4').removeClass('layui-hide')
            $('.test_form_show4').addClass('layui-show')


        }
        // $("#container_fields").empty()
        //使用ajax发送请求
        id = {$row.id};
        $.ajax({
            url:"/admin/column.clist/editAllColumn?id=" + id,
            type:"get",

            dataType:"json",
            success:function(data){
                // console.log(data);return false;
                var htm1 = "";
                var htm2 = "";
                var htm3 = "";
                var htm4 = "";
                $.each(data.data,function(index,value){
                    // console.log(value.name);return false;

                    if(value.type == 1){

                        if(value.is_check == 1){
                            htm1 += "    <input type='checkbox' name='fields["+value.id+"]' lay-skin='primary' lay-verify='required' title='"+value.name+"' checked>";
                            htm1 += "<div class='layui-unselect layui-form-checkbox layui-form-checked' lay-skin='primary'>";
                        }else{
                            htm1 += "    <input type='checkbox' name='fields["+value.id+"]' lay-skin='primary' lay-verify='required' title='"+value.name+"' >";
                            htm1 += "<div class='layui-unselect layui-form-checkbox' lay-skin='primary'>";
                        }

                        htm1 += "<span>"+value.name+"</span>";
                        htm1 += "<i class='layui-icon layui-icon-ok'></i>";
                        htm1 +="</div>";
                    }else if(value.type == 2){

                        if(value.is_check == 1){
                            htm2 += "    <input type='checkbox' name='fields["+value.id+"]' lay-skin='primary' lay-verify='required' title='"+value.name+"' checked>";
                            htm2 += "<div class='layui-unselect layui-form-checkbox layui-form-checked' lay-skin='primary'>";
                        }else{
                            htm2 += "    <input type='checkbox' name='fields["+value.id+"]' lay-skin='primary' lay-verify='required' title='"+value.name+"' >";
                            htm2 += "<div class='layui-unselect layui-form-checkbox' lay-skin='primary'>";
                        }
                        htm2 += "<span>"+value.name+"</span>";
                        htm2 += "<i class='layui-icon layui-icon-ok'></i>";
                        htm2 +="</div>";
                    }else if(value.type == 3){

                        if(value.is_check == 1){
                            htm3 += "    <input type='checkbox' name='fields["+value.id+"]' lay-skin='primary' lay-verify='required' title='"+value.name+"' checked>";
                            htm3 += "<div class='layui-unselect layui-form-checkbox layui-form-checked' lay-skin='primary'>";
                        }else{
                            htm3 += "    <input type='checkbox' name='fields["+value.id+"]' lay-skin='primary' lay-verify='required' title='"+value.name+"' >";
                            htm3 += "<div class='layui-unselect layui-form-checkbox' lay-skin='primary'>";
                        }
                        htm3 += "<span>"+value.name+"</span>";
                        htm3 += "<i class='layui-icon layui-icon-ok'></i>";
                        htm3 +="</div>";
                    }else if(value.type == 4){

                        if(value.is_check == 1){
                            htm4 += "    <input type='checkbox' name='fields["+value.id+"]' lay-skin='primary' lay-verify='required' title='"+value.name+"' checked>";
                            htm4 += "<div class='layui-unselect layui-form-checkbox layui-form-checked' lay-skin='primary'>";
                        }else{
                            htm4 += "    <input type='checkbox' name='fields["+value.id+"]' lay-skin='primary' lay-verify='required' title='"+value.name+"' >";
                            htm4 += "<div class='layui-unselect layui-form-checkbox' lay-skin='primary'>";
                        }
                        htm4 += "<span>"+value.name+"</span>";
                        htm4 += "<i class='layui-icon layui-icon-ok'></i>";
                        htm4 +="</div>";
                    }

                });



                $('#container_fields1').append(htm1);//商机
                $('#container_fields2').append(htm2);//订单
                $('#container_fields3').append(htm3);//设计师
                $('#container_fields4').append(htm4);//异业
            }
        });
    }

    $(function (){

        var type_val = $('input[name="type"]:checked').val();
        showFields(type_val);

    });
</script>